<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>聊天</title>

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="cose.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">

        <nav class="navbar navbar-inverse nav-justified" role="navigation">

            <div class="navbar-header" style="margin-left: 50px">
                <a class="navbar-brand" href="#">
                    <span class="glyphicon glyphicon-home"></span> Cose
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">
                    <span class="glyphicon glyphicon-comment">会话</span>
                </a></li>
                <li class="divider-vertical">
                </li>
                <li><a href="#">
                    <span class="glyphicon glyphicon-th-large">朋友圈</span>
                </a></li>

                </ul>
            <ul class="nav pull-right navbar-nav" style="margin-right: 50px;">

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user">用户</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">个人信息</a></li>
                        <li><a href="#">个人主页</a></li>
                    </ul>
                </li>
                <!--退出按钮  -->
                <li><a href="#">
                    <span class="glyphicon glyphicon-off">退出</span>
                </a></li>
                </ul>
            </nav>
<!--  以上是菜单栏 -->

     <div class="col-md-3 col-md-offset-1">
         <div class="panel panel-default" style="border: solid #31a668 1px">
             <div class="panel-heading menu" style="height: 60px;background: #31a668;">
                <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                 <span style="float: left"><b>张三</b>

                     <span class="glyphicon glyphicon-star" style="color: rgb(255, 220, 60)"></span>
                 </span>
                 <br>
                 <span style="float: left">“世界都在你的脚下”</span>
             </div>
             <!--  朋友列表中间部分 -->
             <div class="panel-body" style="height: 470px;background:#d9edf7">

                 <div data-toggle="collapse" class="brow"
                         data-target="#demo">
                     <span class="glyphicon glyphicon-asterisk" style="font-size: 10px"></span>
                     <b style="font-family: DFKai-SB; font-size: 15px">同学</b>
                 </div>

                 <div id="demo" class="collapse in">
                    <div class="row">
                        <div class="col-sm-12 ulist">
                            <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                            <span style="float: left"><b>张三</b></span>
                            <br>
                            <span style="float: left">世界都在你的脚下</span>
                        </div>
                        <div class="col-sm-12 ulist">
                            <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                            <span style="float: left"><b>张三</b></span>
                            <br>
                            <span style="float: left">世界都在你的脚下</span>
                        </div>
                        <div class="col-sm-12 ulist">
                            <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                            <span style="float: left"><b>张三</b></span>
                            <br>
                            <span style="float: left">世界都在你的脚下</span>
                        </div>
                    </div>
                 </div>

                 <div data-toggle="collapse" class="brow"
                       data-target="#demo1">
                     <span class="glyphicon glyphicon-asterisk" style="font-size: 10px"></span>
                     <b style="font-family: DFKai-SB; font-size: 15px">朋友</b>
                 </div>

                 <div id="demo1" class="collapse in">
                     <div class="row">
                         <div class="col-sm-12 ulist">
                             <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                             <span style="float: left"><b>张三</b>
                             </span>
                             <br>
                             <span style="float: left">世界都在你的脚下</span>
                         </div>
                         <div class="col-sm-12 ulist">
                             <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                             <span style="float: left"><b>张三</b></span>
                             <br>
                             <span style="float: left">世界都在你的脚下</span>
                         </div>
                         <div class="col-sm-12 ulist">
                             <img src="toux.jpeg" class="img-circle" width="50" height="50" style="float: left">
                             <span style="float: left"><b>张三</b></span>
                             <br>
                             <span style="float: left">世界都在你的脚下</span>
                         </div>
                     </div>
                 </div>

             </div>

              <!--  朋友列表底部的部分-->
             <div class="panel-footer" style="height: 40px;background: #31a668;">
                 <span class="logo"  data-toggle="modal" title="查找好友"
                         data-target="#myModal">
                     <span class="glyphicon glyphicon-search"></span>
                 </span>

                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                      aria-labelledby="myModalLabel" aria-hidden="true">
                     <div class="modal-dialog">
                         <div class="modal-content">

                             <div class="modal-header menu">
                                 <button type="button" class="close"
                                         data-dismiss="modal" aria-hidden="true">
                                     &times;
                                 </button>
                                      <h5 style="color: #ffffff"><b>搜索新朋友</b></h5>
                                 <div class="row">
                                     <div class="col-md-10">
                                       <input type="text" class="form-control" id="searcname" placeholder="请输入用户邮箱/用户昵称">
                                     </div>
                                     <div class="col-md-2">
                                         <button type="button" class="btn btn-primary">搜索</button>
                                     </div>
                                 </div>
                             </div>
                             <div class="modal-body" style="height: 450px">
                                 在这里添加一些文本
                             </div>

                         </div><!-- /.modal-content -->
                     </div><!-- /.modal -->
                 </div>

                 <span class="logo"  data-toggle="modal" title="开启消息提醒"  data-target="tooltip">
                     <span class="glyphicon glyphicon-bell"></span>
                 </span>
                  <span class="logo"  data-toggle="modal" title="进入个人空间"  data-target="tooltip">
                     <span class="glyphicon glyphicon-tower"></span>
                 </span>




              </div>
          </div>
        </div>


        <!--以上是好友列表栏 -->
        <div class="col-md-7">
            <div class="panel panel-default" style="border: solid #31a668 1px">
                <div class="panel-heading" style="background: #31a668;">
                    <h3 class="panel-title" style="height: 20px">
                        <!-- 标题   -->
                        <div class="col-sm-12">
                            <img src="toux.jpeg" class="img-circle" width="30" height="30" style="float: left">
                            <span style="float: left">正在和李四聊天</span>

                        </div>
                    </h3>
                </div>
                <!--  消息展示框 -->
                <div class="panel-body" style="height: 440px;background:#d9edf7">
                   <div class="row" style="margin-top:15px">
                       <div class="col-md-1">
                           <img src="22.PNG" width="30px" height="30px">
                       </div>
                       <div class="col-md-8">
                           <div style="background:#286090; color: #ffffff;border-radius: 0.6rem;padding:10px; width:auto; float: left">
                            <p> 张大仙在干嘛？
                            </p>
                           </div>
                       </div>

                   </div>
                    <div class="row" style="margin-top:15px">

                        <div class="col-md-8 col-md-offset-3">
                            <div style="background:#31a668; color: #ffffff;border-radius: 0.6rem;padding:10px; width: auto; float: right">
                            <p> 我在吃饭
                            </p>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <img src="q.jpeg" width="30px" height="30px">
                        </div>

                    </div>


                </div>
                <div class="panel-footer" style="background: #31a668;">
                    <!-- 聊天工具栏 -->
                    <div class="btn-group dropup">

                        <!-- 发送表情工具栏 -->
                        <span class="dropdown-toggle logo"
                                data-toggle="dropdown"  data-placement="top" title="发送表情">
                            <span class="glyphicon glyphicon-dashboard"></span>
                        </span>
                        <div class="dropdown-menu look" role="menu">
                            <img src="biaoqing/nono.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="不要不要">
                            <img src="biaoqing/tt.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="偷偷的走">
                            <img src="biaoqing/tzx.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="偷走你的心">
                            <img src="biaoqing/fn.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="发怒">
                            <img src="biaoqing/ww.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="呜呜">
                            <img src="biaoqing/qrj.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="情人节">
                            <img src="biaoqing/px.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="爬行">
                            <img src="biaoqing/aq.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="爱情">
                            <img src="biaoqing/pxing.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="玩耍">
                            <img src="biaoqing/qqb.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="跷跷板">
                            <img src="biaoqing/jx.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="贱笑">
                            <img src="biaoqing/qz.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="欠揍">
                            <img src="biaoqing/kl.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="快乐">
                            <img src="biaoqing/han.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="汗">
                            <img src="biaoqing/xz.jpg" tdata-toggle="tooltip"
                                 data-placement="top" title="洗澡">
                        </div>

                        <!-- 发送图片按钮 -->

                        <input type="file" id="path" style="display:none">
                        <span class="logo" onclick="path.click()" tdata-toggle="tooltip"
                                data-placement="top" title="发送图片">
                            <span class="glyphicon glyphicon-picture"></span>
                        </span>

                        <!--  工具栏3 -->

                        <span class="logo" tdata-toggle="tooltip"
                                data-placement="top" title="发送语音">
                            <span class="glyphicon glyphicon-earphone"></span>
                        </span>


                    </div>
                    <div class="row" style="margin-top: 10px">
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="name"
                                   placeholder="请输入消息">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 </div>
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
<script>
    $(function () { $("[data-toggle='popover']").popover();});
</script>

</body>
</html>